<template>
  <div>
    <van-tabs v-model="active" @click="onClick">
      <van-tab
        v-for="item in brotherCategory"
        :title="item.name"
        :key="item.id"
      >
        <div class="category-title">{{ item.name }}</div>
        <div class="category-desc">{{ item.front_desc }}</div>
        <product :goodsList="goodsList"></product>
      </van-tab>
    </van-tabs>
  </div>
</template>
 
<script>
import { getCategoryListData, getCategoryGoodsListData } from "@/request/api";
import product from "@/components/product/product.vue";

export default {
  name: "",
  components: {
    product,
  },
  data() {
    return {
      active: "",
      //标签栏数据
      brotherCategory: [],
      goodsList: [],
    };
  },
  methods: {
    //获取产品分类列表数据
    fetchCategoryList() {
      getCategoryListData({
        id: this.$route.query.id,
      }).then((res) => {
        if (res.errno == 0) {
          console.log(res.data);
          let { brotherCategory } = res.data;
          this.brotherCategory = brotherCategory;
          //遍历数组，判断如果数组每一项里对像里的id 如果等于 传过来的id，
          //则让active 等于这一项的索引，即一进来页面默认选中哪一项
          brotherCategory.forEach((val, index) => {
            if (val.id == this.$route.query.id) {
              // console.log(index);
              this.active = index;
            }
          });
          //进入页面时就请求一次数据，展示当前选择类别的数据
          getCategoryGoodsListData({
            categoryId: brotherCategory[this.active].id,
            page: 1,
            size: 10,
          }).then((res) => {
            if (res.errno == 0) {
              // console.log(res.data);
              this.goodsList = res.data.goodsList;
            }
          });
        }
      });
    },
    //每次点击tab标签，请求相对应的数据
    onClick(index) {
      // console.log(index);
      getCategoryGoodsListData({
        categoryId: this.brotherCategory[index].id,
        page: 1,
        size: 10,
      }).then((res) => {
        if (res.errno == 0) {
          // console.log(res.data);
          this.goodsList = res.data.goodsList;
        }
      });
    },
    //获取分类页面的商品列表
    fetchCategoryGoodsList() {},
  },
  created() {
    this.fetchCategoryList();
  },
};
</script>
 
<style lang="less" scoped>
.category-title {
  color: #000;
  height: 0.5rem;
  line-height: 0.5rem;
  text-align: center;
  font-size: 0.17rem;
}
.category-desc {
  margin-bottom: 0.2rem;
  margin-top: 0.1rem;
  font-size: 0.14rem;
  color: #666;
  text-align: center;
}
</style>